import * as echarts from "echarts";
//立体柱状图
const offsetX = 14; //bar宽
const offsetY = 5; //倾斜角度
// 绘制左侧面
const CubeLeft = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0,
    },
    buildPath: function (ctx, shape) {
        // 会canvas的应该都能看得懂，shape是从custom传入的
        const xAxisPoint = shape.xAxisPoint;
        // console.log(shape);
        const c0 = [shape.x, shape.y];
        const c1 = [shape.x - offsetX, shape.y - offsetY];
        const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
        const c3 = [xAxisPoint[0], xAxisPoint[1]];
        ctx
            .moveTo(c0[0], c0[1])
            .lineTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .closePath();
    },
});
// 绘制右侧面
const CubeRight = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0,
    },
    buildPath: function (ctx, shape) {
        const xAxisPoint = shape.xAxisPoint;
        const c1 = [shape.x, shape.y];
        const c2 = [xAxisPoint[0], xAxisPoint[1]];
        const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
        const c4 = [shape.x + offsetX, shape.y - offsetY];
        ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
    },
});
// 绘制顶面
const CubeTop = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0,
    },
    buildPath: function (ctx, shape) {
        const c1 = [shape.x, shape.y];
        const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
        // const c3 = [shape.x, shape.y - offsetX];
        const c3 = [shape.x, shape.y - offsetY * 2];
        const c4 = [shape.x - offsetX, shape.y - offsetY];
        ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
    },
});
// 注册三个面图形
echarts.graphic.registerShape("CubeLeft", CubeLeft);
echarts.graphic.registerShape("CubeRight", CubeRight);
echarts.graphic.registerShape("CubeTop", CubeTop);
let colorArr = [
    ["#00f9d1"],
    ["#09DAF3", "rgba(13,8,16,0)"],
    ["#07A0B3", "rgba(14,185,151,0)"],
];

export default {
    tooltip: {
        trigger: "axis",
        axisPointer: {
            type: "shadow",
        },
        formatter: function (params, ticket, callback) {
            const item = params[1];
            return item.value + "";
        },
    },
    grid: {
        left: "2%",
        right: "2%",
        top: "18%",
        bottom: "2%",
        containLabel: true,
    },
    xAxis: {
        type: "category",
        data: [],
        axisLine: {
            lineStyle: {
                width: 2,
                color: "#fff",
            },
        },
        axisTick: {
            show: false,
        },
    },
    yAxis: {
        type: "value",
        name: "人",
        nameTextStyle: {
            padding: [0, 35, 0, 0],
            color: "#fff",
        },
        splitNumber: 4,
        axisLine: {
            show: true,
            lineStyle: {
                color: "#999",
                type: "dashed",
            },
        },
        splitLine: {
            lineStyle: {
                color: "#999",
                type: "dashed",
            },
        },
        axisLabel: {
            show: true,
            fontSize: 12,
            color: "#fff",
        },
    },
    series: [
        {
            type: "custom",
            renderItem: (params, api) => {
                const location = api.coord([api.value(0), api.value(1)]);
                return {
                    type: "group",
                    children: [
                        {
                            type: "CubeLeft",
                            shape: {
                                api,
                                xValue: api.value(0),
                                yValue: api.value(1),
                                x: location[0],
                                y: location[1],
                                xAxisPoint: api.coord([api.value(0), 0]),
                            },
                            style: {
                                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: colorArr[1][0],
                                    },
                                    {
                                        offset: 1,
                                        color: colorArr[1][1],
                                    },
                                ]),
                            },
                        },
                        {
                            type: "CubeRight",
                            shape: {
                                api,
                                xValue: api.value(0),
                                yValue: api.value(1),
                                x: location[0],
                                y: location[1],
                                xAxisPoint: api.coord([api.value(0), 0]),
                            },
                            style: {
                                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: colorArr[2][0],
                                    },
                                    {
                                        offset: 1,
                                        color: colorArr[2][1],
                                    },
                                ]),
                            },
                        },
                        {
                            type: "CubeTop",
                            shape: {
                                api,
                                xValue: api.value(0),
                                yValue: api.value(1),
                                x: location[0],
                                y: location[1],
                                xAxisPoint: api.coord([api.value(0), 0]),
                            },
                            style: {
                                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: colorArr[0][0],
                                    },
                                    {
                                        offset: 1,
                                        color: colorArr[0][0],
                                    },
                                ]),
                            },
                        },
                    ],
                };
            },
            data: [],
        },
        {
            type: "bar",
            itemStyle: {
                color: "transparent",
            },
            data: [],
        },
    ],
}